<script setup>
import {ref} from 'vue';
import { useUser } from '@/stores';
import { useRouter } from 'vue-router';
let router = useRouter();
let user = useUser();
let username = ref('');
let password = ref('');
function btn(){
    if(username.value==''){
        alert('手机号不能为空');
    }else if(password.value == ''){
        alert('密码不能为空');
    }else if(username.value.length<11){
        alert('手机号长度不能小于11位');
    }else if(password.value.length<8){
        alert('密码长度不能小于8位');
    }else{
        user.login(username.value,password.value);
        router.push('/work');
    }
}
</script>
<template>
    <div class="page">
        <div class="left">
            <div class="dl">请先登录</div>
            <input type="number" id="name" v-model="username"  placeholder="请输入手机号/QQ号"/>
            <input type="password" id="pwd" v-model="password"  placeholder="请输入密码"/>
            <button @click="btn">提交</button>
        </div>
        <div class="right">
            <span>没有账号?</span>
            <span>立即注册加入我们吧!!!!</span>
            <span>注册</span>
        </div>
    </div>
</template>
<style scoped>
.page{
    width: 400px;
    height: 300px;
    display: flex;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    box-shadow: -2px 2px 10px #ccc;
    border-radius: 20px;
}
.left{
    width: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 10px;
}
.left .dl{
    font-size: 23px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
}
.left input{
    outline: none;
    height: 25px;
    margin-bottom: 15px;
}
.left button{
    width: 50px;
    height: 25px;
    padding: 5px;
    text-align: center;
    margin: 0 auto;
    background-color: red;
    color: #fff;
    border: none;
}
.right{
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
    background-color: #0bb;
    border-radius: 20px;
    color: #fff;
    justify-content: center;
}
.right>span:nth-child(1){
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}
.right>span:nth-child(3){
    width: 50px;
    margin: 0 auto;
    margin-top: 10px;
    border: #fff 2px solid;
    border-radius: 999px;
    border-bottom-color: #ccc;
    border-right-color: #ccc;
    text-align: center;
}
</style>